<template>
    <d2-container class="warning-header">

        <el-card>
            <el-row :gutter="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="设备型号">
                        <el-select v-model="formInline.modtype" placeholder="所有" style="width:140px">
                            <el-option v-for="(item,index) in modType " :key="index" :label="item.modName"
                                       :value="item.modType"></el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="故障类型">
                        <el-select v-model="formInline.LogType" placeholder="所有" style="width:140px">
                            <el-option v-for="(item,index) in LogType " :key="index" :label="item.errorname"
                                       :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="处理状态">
                        <el-select v-model="formInline.ProcessFlag" placeholder="所有" style="width:140px">
                            <el-option label="所有" value="0"></el-option>
                            <el-option label="发出未接收" value="1"></el-option>
                            <el-option label="接收未处理" value="2"></el-option>
                            <el-option label="处理完成" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="采集器SN">
                        <el-input v-model="formInline.RtuSN" style="width:140px"></el-input>
                    </el-form-item>
                    <el-form-item label="发生时间">
                        <el-date-picker v-model="value1" type="date" placeholder="选择日期" style="width:140px">
                            <el-input v-model="formInline.beginTime"></el-input>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="持续时间">
                        <el-date-picker v-model="value2" type="date" placeholder="选择日期" style="width:140px">
                            <el-input v-model="formInline.endTime"></el-input>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>


                        <el-button icon="el-icon-search" size="mini" round @click="onSubmit" type="primary">搜索
                        </el-button>

                        <el-button round type="primary" size="mini" @click="exportCsv" icon="el-icon-download">
                            导出Excel
                        </el-button>
                        <el-button icon="el-icon-edit" size="mini" round @click="onSubmit" type="primary">批量处理
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>

        </el-card>
        <br/>

        <div>
            <el-card>
                <el-table
                        :data="tableData.data"
                        :stripe="true"
                        :border="true"
                        tooltip-effect="dark">
                    <el-table-column
                            type="selection"
                            width="55"></el-table-column>
                    <el-table-column type="index" width="55" label="序号" align="cennter"></el-table-column>
                    <el-table-column prop="LogTime" label="发生时间" width="180px" align="center">
                    </el-table-column>
                    <el-table-column prop="LogEndTime" label="持续时间" width="180px" align="center">
                    </el-table-column>
                    <el-table-column prop="ProjectName" label="项目名称" width="160px" align="center">
                    </el-table-column>
                    <el-table-column prop="DevName" label="设备名称" width="180px" align="center">
                    </el-table-column>
                    <el-table-column prop="installAddress" label="安装地址" width="220px" align="center">
                    </el-table-column>

                    <el-table-column prop="errorType" label="告警级别" width="120px" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.errorType == '1'">
                                报警
                            </div>
                            <div v-else-if="scope.row.errorType == '0'">
                                故障
                            </div>
                            <div v-else-if="scope.row.errorType == '2'">
                                系统
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column prop="ErrorName" label="故障描述" width="120px" align="center">
                    </el-table-column>
                    <el-table-column prop="Value" label="数值" width="120px" align="center">
                    </el-table-column>
                    <el-table-column prop="IsReal" label="是否误报" width="120px" align="center">
                        <template slot-scope="scope">
                             <div v-if="scope.row.IsReal == '1'">
                                 是
                             </div>
                            <div v-else>
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="AckStatus" label="确认状态" width="120px" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.AckStatus == '1'">
                                是
                            </div>
                            <div v-if="scope.row.AckStatus == '1'">
                                是
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ProcessFlag" label="处理状态" width="120px" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.ProcessFlag == '1'">
                                未处理
                            </div>
                            <div v-else-if="scope.row.ProcessFlag == '2'">
                                已处理
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ReceiveBy" label="接收人" width="120px" align="center">
                    </el-table-column>
                    <el-table-column prop="ReceiveTime" label="接收时间" width="120px" align="center">
                    </el-table-column>
                    <el-table-column prop="ProcessBy" label="处理人" width="120px" align="center">
                    </el-table-column>
                    <el-table-column prop="ProcessTime" label="处理时间" width="120px" align="center">
                    </el-table-column>
                    <el-table-column prop="ProcessReason" label="原因分析" width="140px" align="center">
                    </el-table-column>
                    <el-table-column prop="ProcessMemo" label="处理方案及结果" width="140px" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="300px" fixed="right" align="center">
                        <template slot-scope="scope">



                            <el-button @click="handleClickDeal(scope.$index,scope.row)" size="mini" round
                                       icon="el-icon-edit" align="center">处理
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
        <!--分页操作 -->

        <template slot="footer">
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"

                        layout="prev, pager, next, jumper"
                        :total="tableData.total">
                </el-pagination>
            </div>
        </template>
        <!-- 编辑弹出处理页面-->
        <el-dialog
                title="告警处理"
                :visible.sync="editFormVisible"
                width="50%"
                :before-close="handleClose">
            <el-card>
                <el-row>
                    <el-form :inline="true" :model="detailData" class="demo-form-inline" ref="detailData" disabled>
                        <el-form-item label="项目名称" prop="ProjectName">
                            <el-input v-model="detailData.ProjectName" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="网关编号" prop="DeviceNo">
                            <el-input v-model="detailData.DeviceNo" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="设备编号" prop="DeviceNo">
                            <el-input v-model="detailData.DeviceNo" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form :inline="true" :model="detailData" class="demo-form-inline" ref="detailData" disabled>
                        <el-form-item label="发生时间" prop="LogTime" class="number1">
                            <el-input v-model="detailData.LogTime" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="持续时间" prop="LogEndTime">
                            <el-input v-model="detailData.LogEndTime" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="故障描述" prop="ErrorName">
                            <el-input v-model="detailData.ErrorName" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-row>
            </el-card>
            <br/>
            <el-card>
                <el-form :model="detailData" ref="detailData">
                    <el-input type="hidden" v-model="detailData.Id" auto-complete="off"
                    ></el-input>
                    <el-form-item label="处理时间" prop="ReceiveTime">
                        <el-col :span="5">
                            <el-date-picker v-model="detailData.ProcessTime" type="dateTime">
                                <el-input v-model="detailData.ReceiveTime" auto-complete="off"></el-input>
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="是否属实" prop="IsReal">
                        <el-col :span="5">
                            <el-switch
                                    v-model="detailData.IsReal"

                                    active-value="1"
                                    inactive-value="0">
                                    active-text="属实"
                                    inactive-text="不属实">
                            </el-switch>
                        </el-col>
                    </el-form-item>
                    <el-form-item
                            label="原因分析"
                            prop="ProcessReason"
                            :rules="[
                             {required:true,message:'请输入原因分析,内容不能为空!',trigger:'blur'}
                            ]"
                    >
                        <el-input type="textarea" v-model="detailData.ProcessReason" auto-complete="off"
                                  placeholder="请输入原因分析"></el-input>
                    </el-form-item>
                    <el-form-item label="处理过程"
                                  prop="ProcessMemo"
                                  :rules="[
                                    {required:true,message:'请输入处理意见,内容不能为空!',trigger:'blur'}
                                   ]"
                    >
                        <el-input type="textarea" v-model="detailData.ProcessMemo" auto-complete="off"
                                  placeholder="请输入处理意见"></el-input>
                    </el-form-item>
                </el-form>

            </el-card>

            <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitDeal('detailData')"
                               style="text-align: center">确定</el-button>
            </span>
        </el-dialog>
    </d2-container>
</template>
<script>

    import {getWarningTable, modType, LogType, ProcessFlag, getWarningMessage} from "../../api/data/getWarningTable";
    import {getSubmitDetail} from "../../api/data/getSubmitDetail";

    export default {
        mounted() {
            let _this = this;
            this.handleWarningTable({},1);
            //this.handleWarningDetail();
            //this.handleDetailMessage();
            modType().then(d => {
                _this.modType = d.data;
            });
            LogType().then(d => {
                _this.LogType = d.data;
            });
            ProcessFlag().then(d => {
                _this.ProcessFlag = d.data;
            });


        },
        data() {
            return {
                dialogVisible: false,
                currentPage: 1,
                formInline: {
                    modtype: '',
                    LogType: '',
                    ProcessFlag: '',
                    RtuSN: '',
                    begin: '',
                    endTime: '',
                },
                detailData: {
                    IsReal:'0',
                    ProcessTime:'',
                    Id: '',
                    ReceiveTime: '',
                    ProcessReason: '',
                    ProcessMemo: ''
                },
                modType: [],
                LogType: [],
                ProcessFlag: [],
                RtuSN: [],
                begin: [],
                endTime: [],
                value1: '',
                value2: '',
                value3: '',
                tableData: [],
                editFormVisible: false,

                columns: [{prop: 'LogTime', label: '发生时间', width: '180px'},
                    {prop: 'LogEndTime', label: '持续时间', width: '180px'},
                    {prop: 'ProjectName', label: '项目名称', width: '160px'},
                    {prop: 'DevName', label: '设备名称', width: '180px'},
                    {prop: 'installAddress', label: '安装地址', width: '220px'},
                    {prop: 'ErrorName', label: '故障描述', width: '120px'},
                    {prop: 'AckStatus', label: '确认状态', width: '120px'},
                    {prop: 'ProcessFlag', label: '处理状态', width: '120px'},
                    {prop: 'ReceiveBy', label: '接收人', width: '120px'},
                    {prop: 'ProcessBy', label: '处理人', width: '120px'},
                    {prop: 'ProcessTime', label: '处理时间', width: '120px'},
                    {prop: 'ProcessReason', label: '原因分析', width: '140px'},
                    {prop: 'ProcessMemo', label: '处理方案与结果', width: '140px'},
                ]
                // multipleSelection: []
            }
        },
        methods: {
            handleWarningTable(data = {}, pageno) {
                // let data = {};
                data = Object.assign(data, {pageno: pageno, pagesize: 10});
                getWarningTable(data).then(res => {
                    this.tableData = res;
                })

            },
            handleWarningDetail(data = {}) {
                data = Object.assign(data, {useId: {}});
                getWarningMessage(data).then(res => {

                    this.detailData = res.data;
                })
            },
            exportCsv() {
                let _this = this;
                this.$export.csv({
                    columns: _this.columns, data: _this.tableData
                }).then(() => {
                    // ...可选回调
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row)
                    })
                } else {
                    this.$refs.multipleTable.clearSelection()
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            onSubmit() {
                this.handleWarningTable(this.formInline, 1);
            },
            onAllDeal() {
                this.handleWarningTable(this.formInline, 1);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.handleWarningTable(this.formInline, val);
            },

            handleClickDetail: function (index, row) {
                this.editFormVisible = true;
                this.detailData = Object.assign({}, row, {userId: {}});
            },
            handleClickDeal: function (index, row) {
                this.editFormVisible = true;
                console.log(row);
                if(row.IsReal) {
                    row.IsReal = "1"
                }else{
                    row.IsReal = "0"
                }
                    this.detailData = row
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //确定处理意见
            submitDeal(detailData) {
                this.$refs[detailData].validate((valid) => {
                    if (valid) {
                        this.handleDetailMessage(this.detailData);
                        this.editFormVisible = false;

                    } else {
                        console.log('提交失败！');
                        return false;
                    }
                });
            },
            //提交数据给后台
            handleDetailMessage(detailData) {
                getSubmitDetail(detailData).then(res => {
                    if (res.state === 0) {
                        this.$message({
                            message: '提交成功！',
                            type: 'success'
                        });
                        //刷新
                        this.handleWarningTable(this.formInline, this.currentPage)
                    } else {
                        this.$message({
                            message: '提交失败！',
                            type: 'error'
                        });

                    }
                });
            }

        }
    }
</script>
<style>
    .warning-header .d2-container-full__header {
        background: gainsboro !important;
    }

    .warning-header .d2-container-full__header {
        background: #1E9FFF !important;

    }

    .el-form-item__content {
        text-align: center;
    }

    .el-button {
        padding: 10px 30px;
        margin-right: 20px;
    }

    .el-form-item__label {
        margin-left: 5px;
    }

    .number1 {
        padding-left: 0px;
    }


</style>

